// TODO(kara): update vars for desktop when MD team responds
@import '../core/style/button-common';
@import '../core/style/layout-common';
@import '../core/style/menu-common';
@import '../../cdk/a11y/a11y';

$mat-menu-vertical-padding: 8px !default;
$mat-menu-border-radius: 4px !default;
$mat-menu-submenu-indicator-size: 10px !default;

.mat-menu-panel {
  @include mat-menu-base();
  max-height: calc(100vh - #{$mat-menu-item-height});
  border-radius: $mat-menu-border-radius;
  outline: 0;

  // Prevent users from interacting with the panel while it's animating. Note that
  // people won't be able to click through it, because the overlay pane will catch the click.
  // This fixes the following issues:
  //  * Users accidentally opening sub-menus when the `overlapTrigger` option is enabled.
  //  * Users accidentally tapping on content inside the sub-menu on touch devices, if the
  //    sub-menu overlaps the trigger. The issue is due to touch devices emulating the
  //    `mouseenter` event by dispatching it on tap.
  &.ng-animating {
    pointer-events: none;
  }

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

// `:not(:empty)` allows for the menu to collapse to 0x0 when it doesn't have content.
.mat-menu-content:not(:empty) {
  padding-top: $mat-menu-vertical-padding;
  padding-bottom: $mat-menu-vertical-padding;
}

.mat-menu-item {
  @include mat-button-reset();
  @include mat-menu-item-base();
  position: relative;

  @include cdk-high-contrast {
    &.cdk-program-focused,
    &.cdk-keyboard-focused,
    &-highlighted {
      outline: dotted 1px;
    }
  }
}

.mat-menu-item-submenu-trigger {
  // Increase the side padding to prevent the indicator from overlapping the text.
  padding-right: $mat-menu-side-padding * 2;

  // Renders a triangle to indicate that the menu item will open a sub-menu.
  &::after {
    $size: $mat-menu-submenu-indicator-size / 2;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent currentColor;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: $mat-menu-side-padding;
    transform: translateY(-50%);
  }

  [dir='rtl'] & {
    padding-right: $mat-menu-side-padding;
    padding-left: $mat-menu-side-padding * 2;

    &::after {
      right: auto;
      left: $mat-menu-side-padding;
      transform: rotateY(180deg) translateY(-50%);
    }
  }
}

button.mat-menu-item {
  width: 100%;
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-menu-item .mat-menu-ripple {
  @include mat-fill;

  // Prevent any pointer events on the ripple container for a menu item. The ripple container is
  // not the trigger element for the ripples and can be therefore disabled like that. Disabling
  // the pointer events ensures that there is no `click` event that can bubble up and cause
  // the menu panel to close.
  pointer-events: none;
}
